<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>订单列表</title>
		<link rel="stylesheet" type="text/css" href="../plugins/layui/css/layui.css" />
		<script src="../plugins/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#find{
				position: absolute;
				top: 140px;
				left: 650px;
			}
			#dao{
				position: absolute;
				top: 140px;
				left: 735px;
			}
		</style>
	</head>

	<body>
		<form class="layui-form layui-form-pane" action="#" method="post">

			<div class="layui-form-item" style="margin: 20px 30px 10px 30px;">
				<label class="layui-form-label">订单编号</label>
				<div class="layui-input-inline">
					<input type="text" name="title" lay-verify="username" autocomplete="off" placeholder="请输入标题" class="layui-input">
				</div>

				<fieldset class="layui-elem-field layui-field-title" style=";">

					<div class="layui-form-item">
						<label class="layui-form-label">订单时间</label>
						<div class="layui-input-inline">

							<input type="text" name="date" class="layui-input" id="mydate" value="" />

						</div>
						
						<label class="layui-form-label">接单时间</label>
						<div class="layui-input-inline">

							<input type="text" name="date" class="layui-input" id="mydate2" value="" />

						</div>
					</div>

			</div>
			<div class="layui-form-item" style="margin: 20px 30px 10px 30px;">
				<label class="layui-form-label">支付方式</label>

				<div class="layui-input-inline">

					<select lay-search>
						<option value="">--请选择--</option>
						<option>微信支付</option>
						<option>支付宝</option>
						<option>applepay</option>
						<option>银联</option>
					</select>

				</div>

				<label class="layui-form-label">单行输入框</label>
				<div class="layui-input-inline">
					<input type="text" name="title" lay-verify="username" autocomplete="off" placeholder="请输入标题" class="layui-input">
				</div>

	

		<label class="layui-form-label">单行输入框</label>
		<div class="layui-input-inline">
			<input type="text" name="title" lay-verify="username" autocomplete="off" placeholder="请输入标题" class="layui-input">
		</div>
			</div>
		
		<div class="layui-form-item" style="margin: 20px 30px 10px 30px;">
			<label class="layui-form-label">配送方式</label>
			<div class="layui-input-inline">

				<select lay-search>
					<option value="">--请选择--</option>
					<option>京东自营物流</option>
					<option>顺丰包邮</option>
					<option>四通一达</option>
					<option>中国邮政</option>
				</select>

			</div>
		</div>
					<input type="submit"  class="layui-btn layui-btn-normal" name="" id="find" value="查询" />
					<button value="导出" class="layui-btn layui-btn-normal" id="dao">导出</button>
	
	</form>
	
	<div class="layui-tab">
  <ul class="layui-tab-title" style="margin: 20px 30px 10px 30px;">
    <li class="layui-this">全部订单</li>
    <li>未付款订单</li>
    <li>等待出库</li>
    <li>已出库订单</li>
    <li>买家已收货</li>
    <li>已取消</li>
    <li>退款中</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
    	
    	
	<script type="text/html" id="col_bar">
		<button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="update">修改</button>
		<button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</button>
	</script>

	<table class="layui-table" lay-data="{
		height:400, 
		url:'../dataset/order_goods.json', 
		page:true, 
		id:'test',
		
		
		}" lay-filter="test">
	  <thead>
	    <tr>
	      <th lay-data="{field:'id', sort: true}">商品ID</th>
	      <th lay-data="{field:'goodsname'}">商品名称</th>
	      <th lay-data="{field:'pice', sort: true}">商品价格</th>
	      <th lay-data="{field:'type'}">商品类型id</th>
	      <th lay-data="{field:'count',edit:'text'}">商品数量</th>
	      <th lay-data="{field:'sign'}">商品规格</th>
	      <th lay-data="{field:'classify'}">商品状态</th>
	      <th lay-data="{field:'wealth',width:150,toolbar:'#col_bar',fixed:'right'}">操作</th>
	    </tr>
	  </thead>
	</table>
    	
    	
    	
    </div>
    <div class="layui-tab-item">
    	<!--第一个-->
    	<script type="text/html" id="col_bar">
		<button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="update">修改</button>
		<button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</button>
	</script>

	<table class="layui-table" lay-data="{
		height:400, 
		url:'../dataset/order_goods.json', 
		page:true, 
		id:'test',
		
		
		}" lay-filter="test">
	  <thead>
	    <tr>
	      <th lay-data="{field:'id', sort: true}">商品ID</th>
	      <th lay-data="{field:'goodsname'}">商品名称</th>
	      <th lay-data="{field:'pice', sort: true}">商品价格</th>
	      <th lay-data="{field:'type'}">商品类型id</th>
	      <th lay-data="{field:'count',edit:'text'}">商品数量</th>
	      <th lay-data="{field:'sign'}">商品规格</th>
	      <th lay-data="{field:'classify'}">商品状态</th>
	      <th lay-data="{field:'wealth',width:150,toolbar:'#col_bar',fixed:'right'}">操作</th>
	    </tr>
	  </thead>
	</table>
    	
    	
    </div>
    <div class="layui-tab-item">
    	<!--第3个-->
    	<script type="text/html" id="col_bar_2">
		<button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="update">修改</button>
		<button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</button>
		<button class="layui-btn layui-btn-green layui-btn-sm" lay-event="dayin"><a href="Einvoice.html" target="view_window" style="color: #FFFFFF;">打印发票 </a></button>
	</script>

	<table class="layui-table" lay-data="{
		height:400, 
		url:'../dataset/order_goods.json', 
		page:true, 
		id:'test',
		
		
		}" lay-filter="test">
	  <thead>
	    <tr>
	      <th lay-data="{field:'id', sort: true}">商品编号</th>
	      <th lay-data="{field:'goodsname'}">商品名称</th>
	      <th lay-data="{field:'pice', sort: true}">商品价格</th>
	      <th lay-data="{field:'type'}">商品类型id</th>
	      <th lay-data="{field:'count',edit:'text'}">商品数量</th>
	      <th lay-data="{field:'sign'}">商品规格</th>
	      <th lay-data="{field:'classify'}">商品状态</th>
	      <th lay-data="{field:'wealth',width:250,toolbar:'#col_bar_2',fixed:'right'}">操作</th>
	    </tr>
	  </thead>
	</table>
    	
    </div>
    <div class="layui-tab-item">
    	<!--第4个-->
    	<script type="text/html" id="col_bar_3">
		<button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="update">修改</button>
		<button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</button>
		
	</script>

	<table class="layui-table" lay-data="{
		height:400, 
		url:'../dataset/order_goods.json', 
		page:true, 
		id:'test',
		
		
		}" lay-filter="test">
	  <thead>
	    <tr>
	      <th lay-data="{field:'id', sort: true}">商品ID</th>
	      <th lay-data="{field:'goodsname'}">商品名称</th>
	      <th lay-data="{field:'pice', sort: true}">商品价格</th>
	      <th lay-data="{field:'type'}">商品类型id</th>
	      <th lay-data="{field:'count',edit:'text'}">商品数量</th>
	      <th lay-data="{field:'sign'}">商品规格</th>
	      <th lay-data="{field:'classify'}">商品状态</th>
	      <th lay-data="{field:'wealth',width:150,toolbar:'#col_bar_3',fixed:'right'}">操作</th>
	    </tr>
	  </thead>
	</table>
    </div>
     <div class="layui-tab-item">
    	
    	<script type="text/html" id="col_bar">
		<button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="update">修改</button>
		<button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</button>
	</script>

	<table class="layui-table" lay-data="{
		height:400, 
		url:'../dataset/order_goods.json', 
		page:true, 
		id:'test',
		
		
		}" lay-filter="test">
	  <thead>
	    <tr>
	      <th lay-data="{field:'id', sort: true}">商品ID</th>
	      <th lay-data="{field:'goodsname'}">商品名称</th>
	      <th lay-data="{field:'pice', sort: true}">商品价格</th>
	      <th lay-data="{field:'type'}">商品类型id</th>
	      <th lay-data="{field:'count',edit:'text'}">商品数量</th>
	      <th lay-data="{field:'sign'}">商品规格</th>
	      <th lay-data="{field:'classify'}">商品状态</th>
	      <th lay-data="{field:'wealth',width:150,toolbar:'#col_bar',fixed:'right'}">操作</th>
	    </tr>
	  </thead>
	</table>
    </div> <div class="layui-tab-item">
    	
    	<script type="text/html" id="col_bar">
		<button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="update">修改</button>
		<button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</button>
	</script>

	<table class="layui-table" lay-data="{
		height:400, 
		url:'../dataset/order_goods.json', 
		page:true, 
		id:'test',
		
		
		}" lay-filter="test">
	  <thead>
	    <tr>
	      <th lay-data="{field:'id', sort: true}">商品ID</th>
	      <th lay-data="{field:'goodsname'}">商品名称</th>
	      <th lay-data="{field:'pice', sort: true}">商品价格</th>
	      <th lay-data="{field:'type'}">商品类型id</th>
	      <th lay-data="{field:'count',edit:'text'}">商品数量</th>
	      <th lay-data="{field:'sign'}">商品规格</th>
	      <th lay-data="{field:'classify'}">商品状态</th>
	      <th lay-data="{field:'wealth',width:150,toolbar:'#col_bar',fixed:'right'}">操作</th>
	    </tr>
	  </thead>
	</table>
    </div> <div class="layui-tab-item">
    	
    	<script type="text/html" id="col_bar1">
		<button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="update">同意退货</button>
		<button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">拒绝</button>
	</script>

	<table class="layui-table" lay-data="{
		height:400, 
		url:'../dataset/order_goods.json', 
		page:true, 
		id:'test',
		
		
		}" lay-filter="test">
	  <thead>
	    <tr>
	      <th lay-data="{field:'id', sort: true}">商品ID</th>
	      <th lay-data="{field:'goodsname'}">商品名称</th>
	      <th lay-data="{field:'pice', sort: true}">商品价格</th>
	      <th lay-data="{field:'type'}">商品类型id</th>
	      <th lay-data="{field:'count',edit:'text'}">商品数量</th>
	      <th lay-data="{field:'sign'}">商品规格</th>
	      <th lay-data="{field:'classify'}">商品状态</th>
	      <th lay-data="{field:'wealth',width:150,toolbar:'#col_bar1',fixed:'right'}">操作</th>
	    </tr>
	  </thead>
	</table>
    </div>
  </div>
</div>
	
		<script>
//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>
	<script type="text/javascript">
		
		layui.use(["table","layer"],function(){
			var tab = layui.table;
			var lay = layui.layer;
			
			tab.on("edit(test)",function(obj){
			  console.log(obj.value); //得到修改后的值
			  console.log(obj.field); //当前编辑的字段名
			  console.log(obj.data); //所在行的所有相关数据  
				
			});
			
			
			tab.on("toolbar(test)",function(obj){
				lay.msg(obj.event);
			});
			
			tab.on("tool(test)",function(obj){
				if(obj.event === "update"){
					lay.msg("你单击的是修改!");
					obj.update({
						username:"修改的值"
					});
				}else if(obj.event === "delete"){
					lay.confirm('确定删除吗?', {icon: 3, title:'提示'}, function(index){
					  //do something
					  lay.close(index);
					  obj.del();//删除当前行
					  
					});
				}
			})
		})
		
		
	</script>
		<script type="text/javascript">
			layui.use(["form", "laydate"], function() {
				var form = layui.form;
				var laydate = layui.laydate;

				laydate.render({
					elem: "#mydate",
					type: 'datetime',
					range: false,
					format: 'yyyy年MM月dd日',
					calendar: true
				});
				laydate.render({
					elem: "#mydate2",
					type: 'datetime',
					range: false,
					format: 'yyyy年MM月dd日',
					calendar: true
				});
				form.verify({
					username: [/^\w{4,6}$/, "用户名密码4~6位!"],
					pwd: [/^\w{6,8}$/, "密码输入 错误!"]
				});
			});
		</script>
	</body>

</html>